/* jshint esversion: 6 */
const path = require('path');

//(npm install --save-dev html-webpack-plugin) 安装插件
//该插件的两个作用:
//1.自动在内存中生成指定的页面
//2.自动引用打包好的 bundle.js 文件
//注: 插件需须放在 plugins 节点中
//导入 html-webpack-plugin 插件
const htmlWebpackPlugin = require('html-webpack-plugin');

// vue-loader@15.x 需要配置如下:
// 并在 plugins 节点中添加 new VueLoaderPlugin()
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//配置文件
//本质是一个 js 文件，通过 node 模块操作，向外暴露一个配置对象

module.exports = {
    entry: path.join(__dirname, './src/main.js'), // 入口，指定要被打包的文件
    output: { //输出文件相关配置
        path: path.join(__dirname, './dist'), //指定输出文件路径
        filename: 'bundle.js' //指定输出文件名称
    },
    devServer: { //配置 dev-server 命令参数的第二种形式
        // --open --port 3000 --contentBase src --hot
        open: true, //自动打开浏览器
        port: 3000, //设置端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启动热更新
    },
    plugins: [
        //创建一个 html-webpack-plugin 插件
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html' //指定生成页面的名称
        }),
        new VueLoaderPlugin(),
    ],
    module: { // 配置第三方模块加载器
        rules: [ //第三方模块匹配规则]
            {
                //根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader
                //含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //调用规则 从右到左
            },
            { //处理 scss 文件的 loader
                //sass-loader依赖于node-sass，所以还要安装node-sass
                //执行命令 npm i sass-loader node-loader -D
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // {
            //     //处理图片文件的 loader
            //     //执行命令 cnpm install --save-dev file-loader
            //     test: /\.(jpg|png|bpm|gif|svg)$/,use: 'file-loader'
            // }
            {
                // url-loader 依赖于 file-loader,
                test: /\.(jpg|png|bpm|gif|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 500,
                        //表示当图片大小 <= 500bit 时，图片会自动转为 base64 格式
                        //而大于500bit的图片 url-loader 就不再做处理，由 file-loader从服务器作为静态资源调用
                    }
                }]
            },
            { //处理字体文件的 loader
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: ['file-loader']
            },
            { // js文件处理规则
                test: /\.js$/,
                exclude: /node_modules/,//排除 node_module 中的 js 文件
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {// 修改 Vue 被导入时的路径
            'vue$': 'vue/dist/vue.js'
        }
    }
};

//在控制台输入 webpack 发生了什么？
//1.webpack 去项目的根目录 查找配置文件 webpack.config.js
//2.解析配置文件,导出配置对象
//3.完成打包构建

//使用 webpack-dev-server 工具可实现自动打包编译
//1.使用 npm install webpack-dev-server -D 安装到项目本地开发依赖
//2.使用方法与 webpack 完全一样
//3.必须在本地项目中安装 webpack 方可正常使用
//4.webpack-dev-server 打包生成的 bundle.js 文件,并未存在实际的物理磁盘,而在电脑内存中
//5.bundle.js 以虚拟的形式托管于项目根目录下,可认为其与 dist src node_module 等文件夹平级的文件
//6.通过 http://localhost:8080/src/ 访问 index.html, 可实现实时自动刷新界面

/* 使用 webpack 4.x 需要安装 CLI (npm install --save-dev webpack-cli) */